@import "./com";
header {
    .h_top {
        width: vw(750);
        height: vw(124);
        display: flex;
        align-items: center;
        justify-content: space-between;

        img {
            margin-right: vw(20);
            width: vw(64);
            height: vw(50);
        }

        > .va {
            margin-left: vw(20);
            width: vw(122);
            height: vw(57);
            border: vw(2) solid $col;
            border-radius: vw(26);

            > a p {
                margin: vw(8) vw(30);
            }
        }
    }
}

.hp {
    display: flex;
    justify-content: space-evenly;

    width: vw(750);
    height: vw(170);
    // background-color: violet;

    img {
        width: vw(170);
        height: vw(170);
    }

    .top {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: space-evenly;

        h4 {
            a {
                font-size: vw(33);
            }
        }
        p {
            a {
                font-size: vw(28);
                color: #9d9d9d;
            }
        }
    }

    .top1 {
        font-size: vw(96);
        display: flex;
        justify-content: flex-end;
        align-items: center;
        width: vw(340);
    }
}

.top2 {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: vw(750);
    height: vw(200);

    a {
        > ul {
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
            width: vw(190);
            height: vw(150);
            background-color: pink;

            > li {
                font-size: vw(28);
            }
        }
    }

    a:nth-of-type(1) ul {
        background-color: #b2e0a0;
    }
    a:nth-of-type(2) ul {
        background-color: #a0dce0;
    }
    a:nth-of-type(3) ul {
        background-color: #e0b7a0;
    }
    a:nth-of-type(1) img {
        width: vw(86);
        height: vw(90);
    }

    a:nth-of-type(2) img {
        width: vw(82);
        height: vw(85);
    }

    a:nth-of-type(3) img {
        width: vw(125);
        height: vw(75);
    }
}
main {
    width: vw(750);
    height: vw(900);
    // height: vw(650);

    .box {
        width: vw(750);
        display: flex;
        // justify-content: space-between;
        align-items: center;
        height: vw(100);
        img {
            // width: vw(60);
            height: vw(70);
        }

        ul {
            align-items: center;
            display: flex;
            justify-content: center;
            width: vw(150);
        }

        div {
            display: flex;
            justify-content: space-between;
            width: vw(750);

            ul:nth-of-type(1) {
                display: flex;
                justify-content: flex-start;
                font-size: vw(29);
            }
            ul:nth-of-type(2){
                a {
                    align-items: center;
                    display: flex;
                    li {
                        margin-left: vw(20);
                        font-size: vw(26);
                        margin-right: vw(-15);
                    }
                }

                img {
                    margin: 0 vw(20);
                    width: vw(27);
                    height: vw(25);
                }
            } 
        }
        
    }

}



.box:nth-of-type(2) {
   
    ul{
        
       >img {
           width: vw(70);
           height: vw(70);
       }
    }

   }


    .box:nth-of-type(3) {
        // margin-top: vw(65);
       
       
        ul{
            
           >img {
            width: vw(96);
            height: vw(65);
            margin-left: vw(25);
           }
        }
        
       
       }
.box:nth-of-type(5) {
 margin-top: vw(65);

 ul{
     
    >img {
        width: vw(80);
        height: vw(90);
    }
 }
 
}

.box:nth-of-type(6) {
    // margin-top: vw(65);
   
    ul{
        
       >img {
           width: vw(85);
           height: vw(65);
       }
    }
    
   }


.login {
    display:flex;
    justify-content: space-around;
    align-items: center;
    width: vw(750);
    height: vw(90);

    a >button {
        border: vw(1) solid $col;
        
        width: vw(150);
        height: vw(77);
        border-radius: 30%;
        background-color: $col;
        color: #fff;
        font-size: vw(26);
    }
}





// 尾部

nav {
    > ul {
        position: fixed;
        bottom: 0;
        background-color: #fff;
        width: vw(750);
        height: vw(110);
        display: flex;
        justify-content: space-around;
        > li {
            width: vw(70);
            height: vw(106);

            > a {
                > img {
                    width: vw(70);
                    height: vw(70);
                }
            }
            > p {
                text-align: center;
                font-size: vw(24);
            }
        }
    }
}
